<template>
    <div class="page-container">
        <a-form-model :model="form" style="margin: 50px 0 0 50px; width: 50vw;" layout="vertical">
            <a-form-model-item>
                <div slot="label">Hikari 将会把任何你输入的内容当作 html 显示在页脚部分，请注意 <a href="https://zh.wikipedia.org/wiki/xss" target="_blank">XSS</a> 问题!</div>
                <a-input v-model="form.content" type="textarea" :autoSize="{minRows: 10}"></a-input>
            </a-form-model-item>

            <a-form-model-item>
                <a-button type="primary" size="large" icon="save" @click="saveSetting">保存设置</a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>
<script>
import { getSetting, setSetting } from '../../../api/setting'

export default {
    name: 'BottomSetting',
    data() {return {
        form: {
            content: '<div>Hikari 2</div>'
        }
    }},
    mounted() {
        this.initSetting()
    },
    methods: {
        saveSetting() {
            setSetting({setting: [{
                type: 'footer',
                value: this.form.content
            }]}).then(res => {
                this.$message.success('保存成功')
            }).catch(e => {
                this.$message.error(e.msg || '')
            })
        },
        initSetting() {
            getSetting({
                types: 'footer'
            }).then(res => {
                const navString = res.data.find(v => v.type == 'nav') && res.data.find(v => v.type == 'nav').value
                this.form.content = res.data.find(v => v.type == 'footer') && res.data.find(v => v.type == 'footer').value
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg || '暂未配置')
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.ant-form-item-control {
    margin-top: 5px;
}
</style>
